<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="../css/index.css">
		<!-- 引入组件 -->
		<script src="../js/vue.min.js"></script>
		<script src="../js/vant.min.js"></script>
		<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="html5plus://ready"></script>
		<style type="text/css">
			.van-hairline--top-bottom{
				height: 1000px;
				background-color: #f8f8f8;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="body">
				<van-row >
				  <van-col span="6">
					  <van-badge-group :active-key="activeKey" @change="onChange" >
					    <van-badge :title="Nr.Name" @click="GetSort(Nr.Id)" v-for="(Nr, index) in ListType">
					    </van-badge>
					  </van-badge-group>
				  </van-col>
				  <van-col span="18" >
					  <van-row >
						  <van-col span="12"  v-for="(u, i) in NrSp" style="border: 1px solid #f8f8f8;height: 280px;margin-top: 10px;text-align: center;padding-top: 20px;">
							<div @click="GetId(i)">
								<div><img  :src="u.GoodsImageUrl" onerror="javascript:this.src='../img/insert.png';"  style="width: 80%;"></div>
								<div>
									{{u.Name}}
								</div> 
								<div style="color: red;">
									￥{{u.MarketPrice}}
								</div>
								<div style="color: #969799; font-size: 12px;">
									阅读量:{{u.BrowseCount}}
								</div>
								<div style="color: #969799; font-size: 12px;">
									销量:{{u.VirtualSaleCount}}
								</div>
							</div>
						</van-col>
					</van-row>
				  </van-col>
				</van-row>
			</div>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data:{
					activeKey:0,
					ListType:[],
					NrSp:[],
					value:""
				},
				mounted:function () {
					var _this=this;
					//默认列表数据
					ajax({
						url:"http://dsapi.ysd3g.com/api/Categories",
						dataType:"JSONP",
						success:function(res){
						// console.log(res)
							for(var i=0;i<res.Categories.length;i++){
								vm.ListType.push(res.Categories[i]);
							}
						}
					});
					//默认页面数据
					ajax({
						url:"http://dsapi.ysd3g.com/api/GoodsByCategoryId",
						data:{typeId:0,p:1},
						dataType:"JSONP",
						success:function(res){
							// console.log(res)
							vm.NrSp=res.Data;
						}
					})
				 
				},
				methods:{
					onChange(key) {
					  this.activeKey = key;
					},
					//点击往内容页换东西
					GetSort:function(key){
						ajax({
							url:"http://dsapi.ysd3g.com/api/GoodsByCategoryId",
							data:{typeId:key,p:1},
							dataType:"JSONP",
							success:function(res){
								// console.log(res)
								vm.NrSp=res.Data;
							}
						})
					},
					GetId:function(res){
						var w=plus.webview.create("../views/Goodsdetail.html","vm.Goods[res].Id",{
							zindex:2
						},{Id:vm.NrSp[res].Id});
						plus.webview.show("vm.Goods[res].Id");
					},
					
				}
			})
		</script>
	</body>
</html>
